<template>
  <view class="common-box card-box" :class="custClass" :style="[boxStyle]" @click="boxClickFun">
    <view class="header">
      <template v-if="!headerSlot">
        <view class="header-left">
          <view class="title">
            {{title}}
            <slot name="title"></slot>
          </view>
        </view>
        <view class="header-right">
          <u-icon v-if="headerIcon" :name="headerIcon" :size="headerIconSize" :color="headerIconColor" :customStyle="headerIconStyle"></u-icon>
          <slot name="headerRight"></slot>
        </view>
      </template>
      <template v-if="headerSlot">
        <slot name="header"></slot>
      </template>
    </view>
    <view class="card-content">
      <template v-if="!contentSlot">
        <view>
          {{content}}
          <slot name="left"></slot>
        </view>
        <view>
			<image v-if="icon" :src="icon" style="width: 42px;height:42px"></image>
          <slot name="right"></slot>
        </view>
      </template>
      <template v-if="contentSlot">
        <slot name="content"></slot>
      </template>
    </view>
  </view>
</template>

<script>
import UIcon from "../../uview-ui/components/u-icon/u-icon";
import {
		throttle
	} from '@/utils/utils.js'

let a = 'c'
export default {
  name: "card-box",
  components: {UIcon},
  props: {
    headerSlot: {
      type: Boolean,
      default: false
    },

    contentSlot: {
      type: Boolean,
      default: false
    },

    title: {
      type: String,
      default: ''
    },

    headerIcon: {
      type: String,
      default: ''
    },

    headerIconColor: {
      type: String,
      default: '#'
    },

    headerIconSize: {
      type: String | Number,
      default: '32rpx'
    },

    headerIconStyle: {
      type: Object,
      default() {
        return {}
      }
    },

    content: {
      type: String,
      default: ''
    },

    width: {
      type: String | Number,
      default: '100%'
    },

    height: {
      type: String | Number,
      default: '180rpx'
    },

    custClass: {
      type: String | Array,
      default() {
        return []
      },
    },

    custStyle: {
      type: Object,
      default() {
        return {}
      }
    },

    icon: {
      type: String,
      default: ''
    },

    iconColor: {
      type: String,
      default: '#999999'
    },

    iconSize: {
      type: String | Number,
      default: '32rpx'
    },

    iconWidth: {
      type: String | Number,
      default: '88rpx'
    },

    iconHeight: {
      type: String | Number,
      default: '92rpx'
    },

    iconStyle: {
      type: Object,
      default() {
        return {}
      }
    },
  },

  data() {
    return {
      boxStyle: {
        width: this.width,
        height: this.height,
        ...this.custStyle
      },

    }
  },

  methods: {
    boxClickFun:throttle(function(){
      this.$emit('click');
    })
  },
}
</script>

<style lang="scss" scoped>
.card-box{
  .header{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    //padding: 15rpx 0;
    margin-bottom: 15rpx;
    box-sizing: border-box;
    .title{
      color: #333333;
      font-weight: bold;
      font-size: 24rpx;
    }
  }
  .card-content{
    width: 100%;
    padding: 0 15rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
}

</style>